<template>
  <view class="container">
    <view class="grid-body mt-30">
      <view class="check grid-common">
        <view class="title flex">{{ detail.itemName }}</view>
        <view class="flex text blue-dot">计划排查部门</view>
        <view class="flex text">
          <text>{{ detail.checkDeptName }}</text>
        </view>
        <view class="bor-top"></view>
        <view class="flex text blue-dot">计划排查岗位</view>
        <view class="flex text">
          <text>{{ detail.checkUserDeptPostName }}</text>
        </view>
        <view class="bor-top"></view>
        <view class="flex text blue-dot">排查人员</view>
        <CuUserSelector label="排查人员" placeholder="请选择" v-model="detail.attendUserList" required multiple />
        <view v-if="detail.isDispose !== '1'" class="button-wrap">
          <button class="u-button block" @click="goDispatch()">派发</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkTaskInfo, checkItemDispatch } from '@/api/dbd/hiddenDangerCheck.js'
import { managerSourceEnum } from '@/utils/constant.js'
import CuUserSelector from '@/components/CuUserSelector/index.vue'

export default {
  components: {
    CuUserSelector
  },
  data() {
    return {
      managerSourceEnum,
      id: null,
      planTaskId: null,
      subTaskId: null,
      dataList: [],
      detail: {},
      location: '',
      riskName: ''
    }
  },
  onLoad(option) {
    this.id = option.id
    this.subTaskId = option.subTaskId
    this.location = option.location
    this.riskName = option.riskName
    this.getData()
  },
  methods: {
    getData() {
      checkTaskInfo(this.id).then((res) => {
        this.detail = res.data
        let { checkUserIds, checkUserNames } = res.data

        let idList = checkUserIds ? checkUserIds.split(',') : []
        let nameList = checkUserNames ? checkUserNames.split(',') : []
        let checkUserList = []
        idList.forEach(function (item, index) {
          checkUserList.push({
            userId: item,
            name: nameList[index]
          })
        })
        this.detail.attendUserList = checkUserList
      })
    },
    cancel() {
      uni.navigateBack()
    },
    async goDispatch() {
      let ids = this.detail.attendUserList.reduce((acc, cur) => (acc = acc.concat(cur.userId)), []).join(',')
      let planTaskId = this.detail.id
      let checkUserIds = ids
      await checkItemDispatch(planTaskId, checkUserIds)
      this.$modal.showToast('保存成功')
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('callback:reload')
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 120px;
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      font-size: 28rpx;
      color: #666;
    }
  }

  .blue-dot {
    position: relative;
    padding-left: 20rpx;

    &::before {
      position: absolute;
      content: '';
      left: 0;
      top: 6rpx;
      width: 8rpx;
      height: 28rpx;
      background-color: #c4c088;
      border-radius: 6rpx;
    }
  }

  .bor-top {
    margin-top: 20rpx;
    height: 1px;
    line-height: 1px;
    border-bottom: 1rpx dashed #d5d7e3;
    border-top: none;
  }

  .check-right-top {
    position: absolute;
    right: 20rpx;
    top: 40rpx;
    image {
      width: 100rpx;
      height: 88rpx;
    }
  }
}
.submit-group {
  background: #fff;
  z-index: 9;
  padding: 30px;
}
.grid-body {
  margin-left: 0;
  margin-right: 0;
}

.button-wrap {
  padding: 30rpx;
  display: flex;

  .space {
    width: 50rpx;
  }

  .submit-button,
  .draft-button {
    flex: 1;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    border-radius: 50rpx;
    font-size: 36rpx;
  }

  .submit-button {
    background: #454a5e;
  }

  .draft-button {
    background: #c4c088;
  }
}
</style>
